#root{
    min-height:100vh;
}
#root>div{
    min-height:100vh;
    background: linear-gradient(to bottom, rgb(201, 212, 223) 0%, rgb(216, 224, 232) 50%, rgb(231, 235, 241) 100%);
    background-attachment: fixed;
    display:grid;
    grid-template-rows: var(--grid-rows);
}
nav{
    padding-top:50px;
    width:fit-content;
    margin:0 auto;  
}
main{
    position:relative;
    margin:20px;
}
/* main::before{
    content:'';
    display: block;
    position: absolute;
    top:20px;
    bottom:20px;
    left:20px;
    right:20px;
    border-radius:20px;
    border: 1px solid rgba( 255, 255, 255, 0.2 );
    box-shadow: 10px 10px 7px #d3d3d34d, -10px -10px 7px #ededed28;
    backdrop-filter: blur( 1px ) opacity(.3);
    -webkit-backdrop-filter: blur( 1px ) opacity(.3);
    background: linear-gradient(145deg, #f0f0f044, #cacaca44);
} */

footer{  
    width:fit-content;
    /* position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%); */
    padding:16px;
    white-space:nowrap;
    
}
.navList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px,5vw,200px);
    font-size: 20px;
    color:#343A40;
}
.navList>div>a{
    animation: fadeIn 2s linear both 1s 1;
    cursor: pointer;
    text-decoration: none;
    color:#343A40;
    position:relative;
    z-index:10;
}
.navList>div{
    width:fit-content;
    height: fit-content;
    position:relative;
}

.navList>.router-link>.active,.navList>.router-link:hover>a{
    color:#F8F9FA;
}
.navList>.router-link:hover::after{
    transition: box-shadow 0.3s ease-in-out;
}
.navList>.router-link>.active::after,.navList>.router-link:hover::after{
    content:'';
    display: block;
    position: absolute;
    top: -6px;
    left: -6px;
    bottom: -6px;
    right: -6px;
    box-sizing: content-box;
    box-shadow:5px 5px 7px #d3d3d34d,
               -5px -5px 7px #ededed28;
    backdrop-filter: blur( 1px ) opacity(.3);
    -webkit-backdrop-filter: blur( 1px ) opacity(.3);
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    background: linear-gradient(145deg, #f0f0f062, #cacaca21);
    z-index: 1;
 
}

.nav-icon{
    font-weight: bold;
    color:#f5f5f5;
    position:relative; 
    width: 20px !important;
    height: 20px !important;
    text-align: center;
    line-height: 20px; 
     /*  一般来说中文或者大写英文设置line-height等于height就会垂直居中，
        但逗号句号，还有π以及一些小写英文字符，本身会偏下就要把line-height调小点让他往上移。 */
    animation: fadeIn 2s linear;
}

.nav-icon::after{
    content: '';
    position:absolute;
    display:block;
    top:-8px;
    left:-8px;
    right:-8px;
    bottom:-8px;
    margin:auto;
    border-radius: 50%;
    border:3px solid #f5f5f5;
    mask: linear-gradient(to bottom,  #f5f5f5 0%, #f5f5f5AA 50%,#f5f5f533 100%);
} 

